<template>
    <div class="search-box">
        <el-autocomplete class="inline-input" size="mini" v-model="keyWords" :fetch-suggestions="querySearch"
            placeholder="输入要搜索的地址" :trigger-on-focus="false" @select="handleSelect">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-autocomplete>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'searchMenu',
    data () {
        return {
            keyWords: '',
            searchList: []
        }
    },

    computed: {
        ...mapState({
            'sideBarList': state => state.sideBar.sideBarList
        })
    },

    mounted () {
        this.loadAll(this.sideBarList)
    },
    methods: {
        loadAll (list) {
            list && list.map(item => {
                if (item.path) {
                    this.searchList.push({
                        value: item.name,
                        path: item.path
                    })
                } else {
                    this.loadAll(item.children)
                }
            })
        },
        querySearch (queryString, cb) {
            var searchList = this.searchList
            var results = queryString ? searchList.filter(this.createFilter(queryString)) : searchList
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilter (queryString) {
            return (searchList) => {
                return (searchList.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
            }
        },
        handleSelect (item) {
            this.$router.push({ path: item.path })
        }
    }
}
</script>

<style scoped lang="scss">
    .search-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        background-color: rgb(84, 92, 100);
    }
</style>
